<template>
  <div id="checkindex">
    <div :class="{'navFixed':ScrollState}" ref="navbar" class="navbar">
      <mt-navbar v-model="selected">
        <mt-tab-item id="2001">待处理</mt-tab-item>
        <mt-tab-item id="2003">已拒绝</mt-tab-item>
        <mt-tab-item id="2004">自动退出</mt-tab-item>
        <mt-tab-item id="2005">被踢掉</mt-tab-item>
      </mt-navbar>
    </div>
    <mt-field label="用户id" placeholder="用户id" type="number" :state="userID==''?'warning':'success'" v-model.trim="userID"></mt-field>
    <div @click="open">
      <mt-field label="起始时间" :readonly="true" placeholder="点击选择时间" :state="startTime==''?'warning':'success'" v-model.trim="startTime"></mt-field>
    </div>
    <div @click="open2">
      <mt-field label="结束时间" :readonly="true" placeholder="点击选择时间" :state="endTime==''?'warning':'success'" v-model.trim="endTime"></mt-field>
    </div>
    <div style="margin:10px 10px">
      <mt-button type="primary" size="large" @click.native="search">查找</mt-button>
    </div>
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="2001">
        <div class="showResult lay" v-show="check.state_2001.show">
          <div class="showResultTitle"> 查询结果 </div>
          <qin-you-view :key="index" v-for="(item,index) in check.state_2001.arr">
            <img :src="item.szHeadPicUrl" slot="icon">
            <div slot="content">
              <p>申请人id : <span class="time">{{item.UserID}}</span></p>
              <p>申请人昵称 : <span class="time">{{item.UserName}}</span></p>
              <p>申请时间 : <span class="time">{{item.CreateDate}}</span></p>
              <p>处理状态 : <span class="success">待处理</span></p>
            </div>
            <div slot="tool" style="text-align:right">
              <mt-button type="default" size="small" @click.native="agree(item.Id,item.UserName,index)">同意</mt-button>
              <mt-button type="default" size="small" @click.native="refuse(item.Id,item.UserName,index)">拒绝</mt-button>
            </div>
          </qin-you-view>
          <div v-if="check.state_2001.arr.length==0" class="noresult">
            无符合条件的数据
          </div>
          <div v-if="check.state_2001.arr.length>0">
            <div style="margin:10px 10px">
              <mt-button type="primary" size="large" v-if="check.state_2001.nextPage<check.state_2001.totalPages" @click.native="loadMore">加载更多</mt-button>
              <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
      <!-- 2003 -->
      <mt-tab-container-item id="2003">
        <div class="showResult lay" v-show="check.state_2003.show">
          <div class="showResultTitle"> 查询结果 </div>
          <qin-you-view :key="index" v-for="(item,index) in check.state_2003.arr">
            <img :src="item.szHeadPicUrl" slot="icon">
            <div slot="content">
              <p>申请人id : <span class="time">{{item.UserID}}</span></p>
              <p>申请人昵称 : <span class="time">{{item.UserName}}</span></p>
              <p>申请时间 : <span class="time">{{item.CreateDate}}</span></p>
              <p>拒绝时间 : <span class="time">{{item.ModifyDate}}</span></p>
              <p>处理状态 : <span class="success">已拒绝</span></p>
            </div>
          </qin-you-view>
          <div v-if="check.state_2003.arr.length==0">
            无符合条件的数据
          </div>
          <div v-if="check.state_2003.arr.length>0">
            <div style="margin:10px 10px">
              <mt-button type="primary" size="large" @click.native="loadMore" v-if="check.state_2003.nextPage<check.state_2003.totalPages">加载更多</mt-button>
              <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
      <!-- 2004 -->
      <mt-tab-container-item id="2004">
        <div class="showResult lay" v-show="check.state_2004.show">
          <div class="showResultTitle"> 查询结果 </div>
          <qin-you-view :key="index" v-for="(item,index) in check.state_2004.arr">
            <img :src="item.szHeadPicUrl" slot="icon">
            <div slot="content">
              <p>申请人id : <span class="time">{{item.UserID}}</span></p>
              <p>申请人昵称 : <span class="time">{{item.UserName}}</span></p>
              <p>申请时间 : <span class="time">{{item.CreateDate}}</span></p>
              <p>退出时间 : <span class="time">{{item.ExitTime}}</span></p>
              <p>处理状态 : <span class="success">自动退出</span></p>
            </div>
          </qin-you-view>
          <div v-if=" check.state_2004.arr.length==0">
            无符合条件的数据
          </div>
          <div v-if="check.state_2004.arr.length>0">
            <div style="margin:10px 10px">
              <mt-button type="primary" size="large" @click.native="loadMore" v-if="check.state_2004.nextPage<check.state_2004.totalPages">加载更多</mt-button>
              <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
      <!-- 2005 -->
      <mt-tab-container-item id="2005">
        <div class="showResult lay" v-show="check.state_2005.show">
          <div class="showResultTitle"> 查询结果 </div>
          <qin-you-view :key="index" v-for="(item,index) in check.state_2005.arr">
            <img :src="item.szHeadPicUrl" slot="icon">
            <div slot="content">
              <p>申请人id : <span class="time">{{item.UserID}}</span></p>
              <p>申请人昵称 : <span class="time">{{item.UserName}}</span></p>
              <p>申请时间 : <span class="time">{{item.CreateDate}}</span></p>
              <p>处理时间 : <span class="time">{{item.EliminateDate}}</span></p>
              <p>处理状态 : <span class="success">踢掉</span></p>
            </div>
          </qin-you-view>
          <div v-if=" check.state_2005.arr.length==0">
            无符合条件的数据
          </div>
          <div v-if="check.state_2005.arr.length>0">
            <div style="margin:10px 10px">
              <mt-button type="primary" size="large" @click.native="loadMore" v-if="check.state_2005.nextPage<check.state_2005.totalPages">加载更多</mt-button>
              <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-datetime-picker ref="picker" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model="starttime" @confirm="handleConfirmS">
    </mt-datetime-picker>
    <mt-datetime-picker ref="pickerend" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model="endtime" @confirm="handleConfirmE">
    </mt-datetime-picker>
    <mt-popup v-model="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
      {{msg}}
    </mt-popup>
  </div>
</template>
<script>
  import QinYouView from '../../../components/QinyouView/QinYouView'
  import {
    MessageBox
  } from 'mint-ui'
  export default {
    name: "check",
    components: {
      QinYouView
    },
    filters: {
      replaceSpe: function(val) {
        if (!val) {
          return ""
        }
        val = val.replace('/0', "");
        return val;
      }
    },
    data() {
      return {
        selected: "2001", //初始选择的tabbat
        startTime: "", //开始时间，
        endTime: "", //结束时间
        H: 0, //高度
        ScrollState: false, //是否处于滚动的状态
        startDate: new Date('2017-01-01'), //时间选择器最小的时间
        endDate: new Date(), //时间选择器最大时间
        starttime: 0, //开始时间对象
        endtime: 0, //结束时间对象
        userID: '',
        msg: "",
        popupVisible: false,
        check: {
          state_2001: {
            show: true,
            arr: [],
            totalCount: 0,
            nextPage: 0,
            totalPages: 0
          },
          state_2003: {
            show: false,
            arr: [],
            totalCount: 0,
            nextPage: 0,
            totalPages: 0
          },
          state_2004: {
            show: false,
            arr: [],
            totalCount: 0,
            nextPage: 0,
            totalPages: 0
          },
          state_2005: {
            show: false,
            arr: [],
            totalCount: 0,
            nextPage: 0,
            totalPages: 0
          }
        }
      }
    },
    watch: {
      selected: function(val, oldval) {
        if (val != oldval) {}
      }
    },
    methods: {
      handleConfirmS: function(time) {
        this.starttime = time;
        this.startTime = this.formateTimeObj(time) + " 00:00:00";
     //   console.log(this.startTime);
      },
      handleConfirmE: function(time) {
        this.endtime = time;
        this.endTime = this.formateTimeObj(time) + " 23:59:59";
       // console.log(this.endTime);
      },
      formateTimeObj: function(obj) {
        let Y = obj.getFullYear();
        let M = obj.getMonth() + 1;
        let D = obj.getDate();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        return `${Y}-${M}-${D}`;
      },
      open: function() {
        this.$refs.picker.open();
      },
      open2: function() {
        this.$refs.pickerend.open();
      },
      agree: function(Id, username, index) {
        MessageBox.confirm(`是否同意昵称为${username}的申请`).then(action => {
          // console.log(Id)
          let data = {
            'functionname': "authvalid",
            body: JSON.stringify({
              id: Id,
              state: 2002 //同意
            })
          }
          this.$http.post(`${this.baseUrl}/Main/UpdateData`, data).then(response => {
            // console.log(response);
            let data = response.data;
            if (data.code == 1) {
              MessageBox("提示", "加入成功")
              this.check.state_2001.arr.splice(index, 1);
            } else {
              MessageBox("提示", "操作失败")
            }
          })
        }, () => {})
      },
      refuse: function(Id, username, index) {
        MessageBox.confirm(`是否拒绝昵称为${username}的群成员`).then(action => {
          let data = {
            'functionname': "authvalid",
            body: JSON.stringify({
              id: Id,
              state: 2003 //拒绝
            })
          }
          this.$http.post(`${this.baseUrl}/Main/UpdateData`, data).then(response => {
            let data = response.data;
            if (data.code == 1) {
              //清楚数据
               MessageBox("提示", "拒绝成功")
              this.check.state_2001.arr.splice(index, 1);
            } else {
              MessageBox("提示", "操作失败")
            }
          })
        }, () => {})
      },
      loadMore: function() {
        let getData = {
          params: {
            'functionname': "GetApplicationList",
            body: JSON.stringify({
              startDate: this.startTime,
              endDate: this.endTime,
              pageIndex: this.check[`state_${this.selected}`].nextPage,
              pageSize: this.PAGESIZE,
              userID: parseInt(this.userID == '' ? 0 : this.userID),
              state: parseInt(this.selected)
            })
          }
        }
        this.getList(getData)
      },
      handleScroll: function() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop == 0) {
          this.ScrollState = false;
          document.getElementById('checkindex').style.paddingTop = 0 + "px"
        }
        if (scrollTop > 0) {
          document.getElementById('checkindex').style.paddingTop = this.H + "px";
          this.ScrollState = true;
        }
      },
      search: function() {
        if (this.startTime == "") {
          MessageBox("提示", "起始时间不能为空");
          return false;
        }
        if (this.endTime == "") {
          MessageBox("提示", "结束时间不能为空");
          return false;
        }
        let getData = {
          params: {
            'functionname': "GetApplicationList",
            body: JSON.stringify({
              startDate: this.startTime,
              endDate: this.endTime,
              pageIndex: 0,
              pageSize: this.PAGESIZE,
              userID: parseInt(this.userID == '' ? 0 : this.userID),
              state: parseInt(this.selected)
            })
          }
        }
       // console.log(getData)
        this.check[`state_${this.selected}`].totalCount = 0;
        this.check[`state_${this.selected}`].nextPage = 0;
        this.check[`state_${this.selected}`].show = true;
        // console.log(getData)
        this.getList(getData)
      },
      getList: function(getData) {
       // console.log(getData);
        let that = this;
        this.$http.get(`${this.baseUrl}/Main/GetData`, getData).then(response => {
          let data = response.data;
          // that.popupVisible = true;
          // that.msg = data.msg;
          // let time = setTimeout(function() {
          //   that.popupVisible = false;
          //   that.msg = "";
          //   clearTimeout(time);
          // }, this.SETTIME);
         // console.log(data);
          if (data.code == 1) {
            if (this.check[`state_${this.selected}`].totalCount == 0) {
              this.check[`state_${this.selected}`].nextPage = 1;
              this.check[`state_${this.selected}`].arr = data.body;
            } else if (this.check[`state_${this.selected}`].totalCount > 0) {
              this.check[`state_${this.selected}`].arr = this.check[`state_${this.selected}`].arr.concat(data.body);
              this.check[`state_${this.selected}`].nextPage = this.check[`state_${this.selected}`].nextPage + 1;
            }
            this.check[`state_${this.selected}`].totalPages = Math.ceil(data.totalCount / this.PAGESIZE);
            this.check[`state_${this.selected}`].totalCount = data.totalCount;
          } else {
            MessageBox("错误提示", data.msg);
          }
        })
      },
      initView: function() {
        let getData = {
          params: {
            'functionname': "GetApplicationList",
            body: JSON.stringify({
              startDate: "",
              endDate: "",
              pageIndex: 0,
              pageSize: this.PAGESIZE,
              userID: 0,
              state: parseInt(this.selected)
            })
          }
        }
        this.getList(getData)
      }
    },
    mounted() {
      document.body.style.background = "#fffbef";
      window.addEventListener("scroll", this.handleScroll);
      this.$nextTick(() => {
        this.H = this.$refs.navbar.offsetHeight;
      });
    },
    created() {
      this.initView();
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll);
    }
  }
</script>

<style lang="sass" scoped>
  
</style>


